<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set" style="height: 100%;">
        <div class="main_rightTop">
            <p>发送公告</p>
        </div>
        <div class="main_rightMain">
            <div class="firmname">
                <span>发送范围<span style="color: #E7744A;">*</span>：</span>
                <input readonly="readonly" :title="sendRange" id="rangeInput" @click="setDirectorClick()" v-model="sendRange" class="inputText" type="text" placeholder="选择部门、人员" @focus="focusInput_1" @blur="blurInput_1"
                    :class="{redBorder:isredBorder_1,focusBorder:isfocusBorder_1}">
            </div>
            <p v-show="warning_1" class="warnStyle">请选择接收人员</p>
            <div class="firmname">
                <span style="margin-left: 28px;">标题<span style="color: #E7744A;">*</span>：</span>
                <input maxlength="35" v-model.trim="noticeTitle" class="inputText" type="text" placeholder="最多35个汉字" @focus="focusInput_2" @blur="blurInput_2"
                    :class="{redBorder:isredBorder_2,focusBorder:isfocusBorder_2}">
            </div>
            <p v-show="warning_2" class="warnStyle">请输入标题(不能含特殊字符)</p>
            <div class="firmname">
                <span style="margin-left: 33px;">作者：</span>
                <input maxlength="10" v-model.trim="author" class="inputText" type="text" @focus="focusInput_3" @blur="blurInput_3"
                    :class="{redBorder:isredBorder_3,focusBorder:isfocusBorder_3}">
            </div>
            <p v-show="warning_4" class="warnStyle">不能输入特殊字符</p>
            <div class="firmname">
                <span style="margin-left: 28px;float:left;">正文<span style="color: #E7744A;">*</span>：</span>
                <div class="editorBox" @focus="focusInput_4" @blur="blurInput_4">
                    <div id="editor" tabindex="-1" @focus="focusInput_4" @blur="blurInput_4" v-html="inputContent" style="height: 250px;">
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <div class="firmlogo">
                <span style="margin-left: 5px;">封面图片：</span><img :src="defaultImg_1" alt="" width="80" height="80">
                <input id="logofile" type="file" style="display: none;" accept="image/jpeg,image/jpg,image/png,image/bmp,image/gif" @change="onFileChange">
                <span class="egRatio">图片尺寸为750*300像素,文件类型.jpg,.jpeg,.bmp,.gif,.png,大小不超过5M</span><br>
                <input type="button" value="上传" @click="upload">
            </div>
            <p v-show="warning_3" class="warnStyle">请上传正确的图片格式</p>
            <!-- <div class="firmfujian">
                <span style="margin-left: 33px;">附件：</span>
                <input id="logofiles" type="file" style="display: none;" accept="application/msword,application/pdf,application/vnd.ms-excel,aplication/zip,application/vnd.ms-powerpoint"
                    @change="onFileChanges">
                    <span style="color: #8F8E94;margin-left: 6px;">支持.doc,.pdf,.xls,.ppt,.zip类型文件，20M以内</span>
                    <input class="fjupload" type="button" value="上传" @click="uploads">
                    <p v-show="warning_5" class="warnStyle">请上传正确的文件格式</p>
                    <ul>
                        <li v-for="(item,index) in items">
                            <div><span>{{item.name}}</span><span class="closeimg" @click="delitem(index)"></span></div>
                        </li>
                    </ul>
                    <div class="checkBox" style="margin-top: 24px;">
                        <el-checkbox v-model="secrecy">设为保密公告</el-checkbox>
                        <p class="grayfont">接收人只能查看，消息不可转发；公告详情页有接收人本人昵称水印</p>
                    </div>
                    <div class="checkBox">
                        <el-checkbox v-model="dang">DANG一下</el-checkbox>
                        <p class="grayfont">通过DANG消息提醒接收人</p>
                    </div>
                    <div class="checkBox">
                        <el-checkbox v-model="stick">置顶工作首页</el-checkbox>
                        <p class="grayfont">发送范围为所有员工时，才可在工作首页置顶</p>
                    </div>
            </div> -->
            <div class="clear"></div>
            <div style="margin: 32px 0;text-align: center;">
                <input type="button" value="发送" class="baocun" @click="send">
                <input type="button" value="预览" class="quxiao" style="margin-left: 46px;" @click="preview">
            </div>
        </div>
        <!--公告预览弹出框-->
        <div class="ModalsBox" v-show="ispreview">
            <div class="Modals">
                <div class="modaltitle">公告预览</div>
                <div class="modalcontent">
                    <h3>{{noticeTitle}}</h3>
                    <p style="margin-top: 10px;margin-bottom: 24px;color:#8F8E94"><span v-show="author != ''" style="margin-right: 16px;">{{author}}</span><span>{{date}}</span></p>
                    <div class="imgbox" v-show="defaultImg_1 != '/static/img/123.png'"><img :src="defaultImg_1" alt=""></div>
                    <p v-html="content" class="contentBox">
                    </p>
                    <!-- <p style="height: 36px;line-height: 36px;color: #8f8e94;">附件：</p>
                    <ul>
                        <li v-for="(item,index) in items">
                            <div><span>{{item.name}}</span></div>
                        </li>
                    </ul> -->

                </div>
                <div class="modalfooter">
                    <input type="button" value="关闭" @click="cancle">
                </div>
            </div>
        </div>
        <!--弹出框选择部门人员组件-->
        <div v-show='ModalsShow' class="ModalsmemBox">
            <div class="Modalsmem">
                <div class="ModalsmemTop">
                    {{selectBranchTitle}}
                </div>
                <div class="ModalsmemCenter">
                    <div class="centerLeft">
                        <div class="centerLeftTop">
                            {{selectBranchTitle}}
                        </div>
                        <div class="centerLeftBot">
                            <div class="centerLeftBotOne">
                                <div v-show="selectBranchTitle == '选择人员' || selectBranchTitle == '选择人员或部门'">
                                    <div class="centerLeftBotOneL">
                                        <img src="/static/img/watchsee.png" alt="">
                                    </div>
                                    <div class="centerLeftBotOneI">
                                        <input @keyup="keyupClick($event)" type="text" placeholder="搜索" v-model.trim="searchsmemVal">
                                    </div>
                                     <div v-show="searchsmemVal != ''" class="centerLeftBotOneX" @click="clearSearchClick">
										<img src="/static/img/Group.png" alt="">
									</div>
                                </div>
                            </div>
                            <div class="centerLeftBotTwo">
                                <ul>
                                    <li v-for="(item,index) in navLists" :key="index" @click="navClick(index)">
                                        <div v-show="index !== 0">
                                            >
                                        </div>
                                        <div>
                                            {{item.name}}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="centerLeftBotThr">
                                <div>
                                    <el-checkbox v-model="checkedDesign" @change="numChangeDesign"></el-checkbox>
                                </div>
                                <div>
                                    <span>全选</span>
                                </div>
                            </div>
                            <div class="centerLeftBotFour">
                                <ul>
                                    <li v-for="(item,index) in selectLeftlists" :key="index">
                                        <div class="centerLeftBotFourLiL" @click="lefthandleCheckedCitiesChange(index)">
                                            <div v-show="item.type == 1 && (selectBranchTitle == '选择部门' || selectBranchTitle == '选择人员或部门')">
                                                <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                                <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                            </div>
                                            <div v-show="item.type == 2 && (selectBranchTitle == '选择人员' || selectBranchTitle == '选择人员或部门')">
                                                <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                                <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                            </div>
                                            <div v-show="item.type == 1">
                                                <img src="/static/img/member@2x.png" alt="">
                                            </div>
                                            <div :title="item.name" :class="{grayColor:item.isAuth == 0 || item.isActivite ==0}">
                                                {{item.name}}-{{item.type | typeFun}}
                                            </div>
                                        </div>
                                        <div v-if="item.type == 1" class="centerLeftBotFourLiR" @click="leftNextClick(index)">
                                            <div>
                                                <img src="/static/img/can@2x.png" alt="">
                                            </div>
                                            <div>
                                                下级
                                            </div>
                                        </div>
                                        <div v-else class="centerLeftBotFourLiR">
                                            <!-- <div>
                                                <img src="/static/img/canon@2x.png" alt="">
                                            </div>
                                            <div>
                                                下级
                                            </div> -->
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="centerCenter">
                        <div @click="commodityLeftClick">
                            <img src="/static/img/xright@2x.png" alt="">
                        </div>
                        <div @click="commodityRightClick">
                            <img src="/static/img/xleft@2x.png" alt="">
                        </div>
                    </div>
                    <div class="centerRight">
                        <div class="centerRightTop">
                            {{selectBranchTitleAlready}}
                        </div>
                        <div class="centerRightBot">
                            <ul>
                                <li v-for="(item,index) in selectRightlists" :key="index" @click="righthandleCheckedCitiesChange(index)">
                                    <div class="centerRightBotLiL">
                                        <div>
                                            <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                            <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                        </div>
                                        <div v-show="item.type == 1">
                                            <img src="/static/img/member@2x.png" alt="">
                                        </div>
                                        <div :title="item.name">
                                            {{item.name}}-{{item.type | typeFun}}
                                        </div>
                                    </div>
                                    <div class="centerRightBotLiR">
                                        <div>
                                            <!-- <img src="/static/img/清空@2x.png" alt=""> -->
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ModalsmemBot">
                    <div @click="confirmClick">
                        确定
                    </div>
                    <div @click="cancelClick">
                        取消
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import WangEditor from "wangeditor";
import { mapActions } from "vuex";
export default {
  name: "",
  data() {
    return {
      ispreview: false,
      islogoImg: "",
      flag: "", //判断编辑器是否为空的标志
      defaultImg_1: "/static/img/123.png",
      warning_1: false,
      warning_2: false,
      warning_3: false,
      warning_4: false,
      warning_5: false,
      noticeTitle: "",
      author: "",
      secrecy: "",
      dang: "",
      stick: "",
      isfocusBorder_1: false,
      isfocusBorder_2: false,
      isfocusBorder_3: false,
      isfocusBorder_4: false,
      isredBorder_1: false,
      isredBorder_2: false,
      isredBorder_3: false,
      isredBorder_4: false,
      sendRange: "",
      items: [{ name: "pdd.ppt" }, { name: "pdd.xls" }, { name: "pdd.zip" }],
      oid: "",
      uid: "",
      inputContent: "", //编辑器html
      content: "", //编辑器给后台提交的html
      contentText: "", //编辑器的纯文本内容
      editorData: null, //编辑器对象
      // 选择人员弹框组件样式
      ModalsShow: false, //弹出框选择部门、人员是否显示
      selectBranchTitle: "选择人员或部门", //弹框标题
      searchsmemVal: "", //弹框搜索input内容
      navLists: [], //弹框内导航数组
      checkedDesign: false, //全选按钮是否选中
      selectLeftlists: [], //左侧选中的数组
      selectBranchTitleAlready: "已选人员", //右侧选中的标题
      selectRightlists: [], //右侧选中的数组
      selectMembersVal_3: [], //给后台传的选中的数据格式
      ischeckedDesignBranch: false, //判断权限，表示是否能全选的标记
      visibleMans: [], //用来展示选中的部门或人员的数组
      // companyName: "", //如果没有作者默认公司名称
      date: "", //发送公告的日期
      isSendSuccess: true, //判断是否请求成功
      lastTimeStamp: 0, //即时搜索判断标志
      appId: "",
      appIdArr: []
    };
  },
  filters: {
    typeFun: function(val) {
      if (val == 1) {
        return "部门";
      } else {
        return "人员";
      }
    }
  },
  created: function() {
    // this.companyName = sessionStorage.getItem("orgName");
    if (sessionStorage.getItem("orgId") == undefined) {
      return;
    }
    // 若此人中途无权限，则跳到登录页
    this.getbusiness({
      oid: sessionStorage.getItem("orgId"),
      uid: sessionStorage.getItem("userId")
    })
      .then(data => {
        if (data.code == "100005") {
          this.$message({
            type: "info",
            message: "对不起，没有权限"
          });
          this.$router.push({
            path: "/login"
          });
        }
      })
      .catch(msg => {
        if (JSON.parse(msg.bodyText).code == "188888") {
          this.$message({
            type: "info",
            message: JSON.parse(msg.bodyText).msg
          });
          this.$router.push({
            path: "/login"
          });
        } else {
          this.$message({
            type: "info",
            message: "服务器错误!"
          });
        }
      });
    this.oid = sessionStorage.getItem("orgId");
    this.uid = sessionStorage.getItem("userId");
    this.appIdArr = JSON.parse(sessionStorage.getItem("business")).authList;
    for (let i = 0; i < this.appIdArr.length; i++) {
      if (this.appIdArr[i].authName == "公告") {
        this.appId = this.appIdArr[i].appId;
      }
    }
    this.listFun();
  },
  mounted() {
    this.createEditor();
  },
  watch: {
    sendRange: function(val) {
      if (val != "") {
        this.isredBorder_1 = this.warning_1 = false;
      }
    },
    noticeTitle: function(val) {
      if (val != "") {
        this.isredBorder_2 = this.warning_2 = false;
      }
    },
    author: function(val) {
      if (val != "") {
        this.isredBorder_3 = this.warning_4 = false;
      }
    }
  },
  methods: {
    // 弹出框即时搜索人员
    keyupClick($event) {
      var self = this;
      //标记当前事件函数的时间戳
      self.lastTimeStamp = $event.timeStamp;
      //800ms后比较二者是否还相同（因为只要还有事件触发，lastTimeStamp就会被改写，不再是当前事件函数的时间戳）
      setTimeout(function() {
        if (self.lastTimeStamp == $event.timeStamp) {
          self.selectLeftlists = [];
          if (self.searchsmemVal == "") {
            self.listFun();
          } else {
            // 在公司所有的人员中进行查找
            self
              .getRequestList({
                oid: self.oid,
                uid: self.uid,
                searchKey: self.searchsmemVal,
                appId: self.appId
              })
              .then(data => {
                if (data.code == "000000") {
                  data.data.forEach(function(ele, ind) {
                    self.selectLeftlists.push({
                      name: ele.name,
                      open: false,
                      parentId: ele.userId,
                      type: 2,
                      id: ele.userId,
                      isAuth: ele.isAuth,
                      isActivite: ele.isActivite
                    });
                  });
                  // 点击数组更新后，循环遍历与右侧进行对比是否选中
                  self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
                    self.selectRightlists.forEach(function(eleRight, rightInd) {
                      if (eleLeft.id == eleRight.id) {
                        self.selectLeftlists[eleLeftInd].open = true;
                      }
                    });
                  });
                  self.judgeSelectAll();
                } else {
                  self.$message({
                    type: "info",
                    message: data.msg
                  });
                }
              })
              .catch(msg => {
                if (JSON.parse(msg.bodyText).code == "188888") {
                  this.$message({
                    type: "info",
                    message: JSON.parse(msg.bodyText).msg
                  });
                  this.$router.push({
                    path: "/login"
                  });
                } else {
                  this.$message({
                    type: "info",
                    message: "服务器错误!"
                  });
                }
              });
          }
        }
      }, 800);
    },
    listFun() {
      var self = this;
      self.selectLeftlists = [];
      this.getdeptstaff({
        oid: self.oid,
        uid: self.uid,
        deptId: "",
        appId: self.appId
      })
        .then(data => {
          if (data.code == "000000") {
            self.navLists = [{ name: "通讯录", deptId: "" }];
            self.selectLeftlists.push({
              name: data.data.name,
              open: false,
              parentId: 0,
              type: data.data.type,
              id: data.data.id,
              isAuth: data.data.isAuth,
              isActivite: data.data.isActivite
            });
            if (self.selectRightlists.length > 0) {
              // 点击数组更新后，循环遍历与右侧进行对比是否选中
              self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
                self.selectRightlists.forEach(function(eleRight, rightInd) {
                  if (eleLeft.id == eleRight.id) {
                    self.selectLeftlists[eleLeftInd].open = true;
                  }
                });
              });
              self.judgeSelectAll();
            }
          } else if (data.code == "100005") {
            self.$message(data.msg);
            self.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    navClick(index) {
      var self = this;
      this.getdeptstaff({
        oid: self.oid,
        uid: self.uid,
        deptId: self.navLists[index].deptId,
        appId: self.appId
      })
        .then(data => {
          if (data.code == "000000") {
            self.selectLeftlists = [];
            var start = index + 1;
            self.navLists.splice(index + 1, self.navLists.length - start);
            // 如果是公司走这里
            if (self.navLists[index].deptId == "") {
              self.selectLeftlists.push({
                name: data.data.name,
                open: false,
                parentId: 0,
                type: data.data.type,
                id: data.data.id,
                isAuth: data.data.isAuth,
                isActivite: data.data.isActivite
              });
            } else {
              data.data.forEach(function(ele, ind) {
                self.selectLeftlists.push({
                  name: ele.name,
                  open: false,
                  parentId: ele.parentId,
                  type: ele.type,
                  id: ele.id,
                  isAuth: ele.isAuth,
                  isActivite: ele.isActivite
                });
              });
            }
            // 点击数组更新后，循环遍历与右侧进行对比是否选中
            self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
              self.selectRightlists.forEach(function(eleRight, rightInd) {
                if (eleLeft.id == eleRight.id) {
                  self.selectLeftlists[eleLeftInd].open = true;
                }
              });
            });
            self.judgeSelectAll();
          } else if (data.code == "100005") {
            self.$message(data.msg);
            self.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    // 下一级
    leftNextClick(index) {
      var self = this;
      this.getdeptstaff({
        oid: self.oid,
        uid: self.uid,
        deptId: self.selectLeftlists[index].id,
        appId: self.appId
      })
        .then(data => {
          if (data.code == "000000") {
            self.navLists.push({
              name: self.selectLeftlists[index].name,
              deptId: self.selectLeftlists[index].id
            });
            self.selectLeftlists = [];
            data.data.forEach(function(ele, ind) {
              self.selectLeftlists.push({
                name: ele.name,
                open: false,
                parentId: ele.parentId,
                type: ele.type,
                id: ele.id,
                isAuth: ele.isAuth,
                isActivite: ele.isActivite
              });
            });
            self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
              self.selectRightlists.forEach(function(eleRight, rightInd) {
                if (eleLeft.id == eleRight.id) {
                  self.selectLeftlists[eleLeftInd].open = true;
                }
              });
            });
            self.judgeSelectAll();
          } else if (data.code == "100005") {
            self.$message(data.msg);
            self.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    // 取消选中商品
    righthandleCheckedCitiesChange(index) {
      var self = this;
      this.selectRightlists[index].open = !this.selectRightlists[index].open;
    },
    // 点击向左移动按钮
    commodityRightClick() {
      var self = this;
      var rights = [];
      var seRight = [];
      self.selectRightlists.forEach(function(ele, ind) {
        if (ele.open == false) {
          rights.push({
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id
          });
        } else {
          seRight.push({
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id
          });
        }
      });
      self.selectRightlists = rights;
      this.selectLeftlists.forEach(function(eleL, indL) {
        seRight.forEach(function(ele, ind) {
          if (eleL.id === ele.id) {
            self.selectLeftlists[indL].open = false;
          }
        });
      });
      this.selectLeftlists.forEach(function(eleL, indL) {
        rights.forEach(function(ele, ind) {
          if (eleL.id === ele.id) {
            self.selectLeftlists[indL].open = true;
          }
        });
      });
      this.judgeSelectAll();
    },
    // 判断是否全选
    judgeSelectAll() {
      var rArrs = [];
      this.selectLeftlists.forEach(function(ele, ind) {
        if (ele.open == true) {
          rArrs.push({
            clickNode: ele.clickNode,
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id,
            isAuth: ele.isAuth,
            isActivite: ele.isActivite
          });
        }
      });
      var hash = {};
      rArrs = rArrs.reduce(function(item, next) {
        hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
        return item;
      }, []);
      if (rArrs.length == this.selectLeftlists.length && rArrs.length !== 0) {
        this.checkedDesign = true;
      } else {
        this.checkedDesign = false;
      }
    },
    // 添加选中商品
    lefthandleCheckedCitiesChange(index) {
      var self = this;
      if (this.selectBranchTitle == "选择人员或部门") {
        if (
          self.selectLeftlists[index].isAuth == 0 &&
          self.selectLeftlists[index].type == 1
        ) {
          //   this.selectLeftlists[index].open = this.selectLeftlists[index].open;
        } else if (
          self.selectLeftlists[index].isActivite == 0 &&
          self.selectLeftlists[index].type == 2
        ) {
          // 不做任何操作
        } else {
          this.selectLeftlists[index].open = !this.selectLeftlists[index].open;
        }
      }
      this.judgeSelectAll();
    },
    // 点击向右移动
    commodityLeftClick() {
      var self = this;
      var rArrs = [];
      this.selectLeftlists.forEach(function(ele, ind) {
        if (ele.open == true) {
          self.selectRightlists.push({
            clickNode: ele.clickNode,
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id,
            isAuth: ele.isAuth,
            isActivite: ele.isActivite
          });
        }
      });
      var hash = {};
      self.selectRightlists = self.selectRightlists.reduce(function(
        item,
        next
      ) {
        hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
        return item;
      },
      []);
    },
    // 所有序号被选中时
    numChangeDesign(event) {
      var self = this;
      self.ischeckedDesignBranch = false;
      self.selectLeftlists.forEach(function(ele, ind) {
        if (
          (ele.isAuth == 0 && ele.type == 1) ||
          (ele.isActivite == 0 && ele.type == 2)
        ) {
          self.ischeckedDesignBranch = true;
        }
      });
      if (self.ischeckedDesignBranch == true) {
        self.checkedDesign = false;
        self.$message("不能选择没有权限的部门或未激活的人员！");
      } else {
        if (event.target.checked) {
          this.selectLeftlists.forEach(function(ele, ind) {
            ele.open = true;
          });
        } else {
          this.selectLeftlists.forEach(function(ele, ind) {
            ele.open = false;
          });
        }
      }
    },
    //选择成员弹出框确认
    confirmClick() {
      this.searchsmemVal = "";
      var arr = this.selectRightlists.map(function(data) {
        return { adminName: data.name, adminId: data.id, type: data.type };
      });
      this.ModalsShow = false;
      // 编辑部门设置可见人
      this.visibleMans = [];
      for (var i = 0; i < arr.length; i++) {
        this.visibleMans.push(arr[i]);
      }
      this.sendRange = this.visibleMans
        .map(function(data) {
          return data.adminName;
        })
        .join(",");
      this.selectMembersVal_3 = this.visibleMans.map(function(data) {
        return { id: data.adminId, type: data.type };
      });
    },
    // 选择成员弹出框取消
    cancelClick() {
      this.ModalsShow = false;
      this.searchsmemVal = "";
    },
    // 点击设置发送范围
    setDirectorClick(m) {
      var self = this;
      self.listFun();
      document.getElementById("rangeInput").blur();
      self.searchsmemVal = "";
      this.ModalsShow = true;
      this.selectRightlists = [];
      this.selectBranchTitle = "选择人员或部门";
      this.selectBranchTitleAlready = "已选人员或部门";
      if (this.visibleMans.length > 0) {
        this.visibleMans.forEach(function(ele, index) {
          self.selectRightlists.push({
            name: ele.adminName,
            id: ele.adminId,
            open: false,
            type: ele.type
          });
        });
        self.selectLeftlists.forEach(function(ele, index) {
          ele.open = false;
        });
        self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
          self.selectRightlists.forEach(function(eleRight, rightInd) {
            if (eleLeft.id == eleRight.id) {
              self.selectLeftlists[eleLeftInd].open = true;
            }
          });
        });
        this.judgeSelectAll();
      } else {
        this.selectRightlists = [];
        self.selectLeftlists.forEach(function(ele, index) {
          ele.open = false;
        });
      }
      this.judgeSelectAll();
    },
    // 清空搜索input内容
    clearSearchClick() {
      this.searchsmemVal = "";
      var self = this;
      self.selectLeftlists = [];
      self.listFun();
    },
    focusInput_1: function() {
      this.isfocusBorder_1 = true;
    },
    blurInput_1: function() {
      this.isfocusBorder_1 = false;
    },
    focusInput_2: function() {
      this.isfocusBorder_2 = true;
    },
    blurInput_2: function() {
      this.isfocusBorder_2 = false;
    },
    focusInput_3: function() {
      this.isfocusBorder_3 = true;
    },
    blurInput_3: function() {
      this.isfocusBorder_3 = false;
    },
    focusInput_4: function() {
      $(".wangEditor-container").css("border", "1px solid #fcb298");
    },
    blurInput_4: function() {
      $(".wangEditor-container").css("border", "1px solid #d9d9d9");
    },
    delitem(index) {
      this.items.splice(index, 1);
    },
    // 点击预览按钮
    preview() {
      var self = this;
      if (self.panduan() == false) {
        return;
      } else {
        this.ispreview = true;
        var standardTime = new Date();
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        self.date = y + "-" + m + "-" + d + " " + h + ":" + f;
      }
    },
    cancle() {
      this.ispreview = false;
    },
    panduan() {
      if (this.sendRange == "") {
        this.isredBorder_1 = this.warning_1 = true;
      }
      if (this.noticeTitle == null || this.noticeTitle == "") {
        this.isredBorder_2 = this.warning_2 = true;
      }
      if (
        this.editorData.$txt.find("iframe").length == 0 &&
        this.editorData.$txt.find("img").length == 0 &&
        this.contentText == ""
      ) {
        $(".wangEditor-container").css("border", "1px solid #FF5F57");
        this.flag = true;
      } else {
        $(".wangEditor-container").css("border", "1px solid #d9d9d9");
        this.flag = false;
      }

      //   if (this.defaultImg_1 == "/static/img/123.png") {
      //     this.warning_3 = true;
      //   }

      if (
        this.isredBorder_1 == true ||
        this.isredBorder_2 == true ||
        // this.warning_3 == true ||
        this.flag == true
      ) {
        return false;
      } else {
        //     // 只能输入中文或英文
        //     var leter = /^[a-zA-Z\u4e00-\u9fa5]+$/
        // 不能输入特殊字符
        var regs = new RegExp(
          "[.\u3000-\u303F\uFF00-\uFFEF\u3400-\u4DBF`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%+_]+"
        );
        if (regs.test(this.noticeTitle)) {
          this.isredBorder_2 = true;
          this.warning_2 = true;
        }
        if (regs.test(this.author)) {
          this.isredBorder_3 = true;
          this.warning_4 = true;
        }

        if (this.isredBorder_2 == true || this.isredBorder_3 == true) {
          return false;
        }
      }
    },
    send() {
      var self = this;
      this.contentText = this.editorData.$txt.text();
      this.content = this.editorData.$txt.html();
      if (this.panduan() == false) {
        return;
      } else {
        if (self.isSendSuccess == true) {
          self.isSendSuccess = false;
          self
            .getapinoticenoticesave({
              oid: self.oid,
              uid: self.uid,
              receive: JSON.stringify(self.selectMembersVal_3),
              title: self.noticeTitle,
              author: self.author,
              content: self.content || self.inputContent,
              image:
                self.defaultImg_1 == "/static/img/123.png"
                  ? "https://web.botong.tech/resource/img/notice.png"
                  : self.defaultImg_1
            })
            .then(data => {
              if (data.code == "000000") {
                self.isSendSuccess = true;
                self.$message({
                  type: "success",
                  message: "发送公告成功"
                });
                self.noticeTitle = self.author = self.sendRange = "";
                self.visibleMans = self.selectMembersVal_3 = [];
                self.editorData.$txt.html("<p><br></p>");
                self.defaultImg_1 = "/static/img/123.png";
              } else {
                self.isSendSuccess = true;
                self.$message(data.msg);
              }
            })
            .catch(msg => {
              self.isSendSuccess = true;
              if (JSON.parse(msg.bodyText).code == "188888") {
                this.$message({
                  type: "info",
                  message: JSON.parse(msg.bodyText).msg
                });
                this.$router.push({
                  path: "/login"
                });
              } else {
                this.$message({
                  type: "info",
                  message: "服务器错误!"
                });
              }
            });
        }
      }
    },
    upload: function() {
      $("#logofile").click();
    },
    uploads: function() {
      $("#logofiles").click();
    },
    // 选择图片上传
    onFileChange(e) {
      var self = this;
      self.islogoImg = true;
      var files = e.target.files || e.dataTransfer.files;
      var fileData = files[0];
      console.log(fileData);
      // 读取图片数据
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        // 加载图片的真实宽度和高度
        var image = new Image();
        image.onload = function() {
          if (image.width !== 750 || image.height !== 300) {
            self.warning_3 = true;
            return;
          } else if (fileData.size > 5242880) {
            self.warning_3 = true;
            return;
          } else {
            self.warning_3 = false;
            self.uploadImage(files[0]);
          }
        };
        image.src = data;
      };
      reader.readAsDataURL(fileData);
    },
    onFileChanges(e) {
      var self = this;
      self.islogoImg == false;
      var files = e.target.files || e.dataTransfer.files;
      var fileData = files[0];
      if (fileData.size < 20971520) {
        self.warning_5 = true;
        return;
      } else {
        self.warning_5 = false;
        self.uploadImage(files[0]);
      }
    },
    // 上传图片
    uploadImage(file) {
      var formdata = new FormData();
      formdata.append("file", file);
      this.uploadFile(formdata).then(data => {
        if (data.code == 200) {
          this.$message({
            message: "上传图片成功",
            type: "success"
          });
          if (this.islogoImg == true) {
            this.defaultImg_1 = data.data[0].reqUrl;
            document.getElementById("logofile").value = "";
          } else {
            this.items.push({ name: data.data[0].path });
            document.getElementById("logofiles").value = "";
          }
        }
      });
    },
    createEditor() {
      const self = this;
      const editor = new WangEditor("editor");
      self.editorData = editor;
      editor.config.menus = [
        "lineheight",
        "indent",
        "bold",
        "underline",
        "italic",
        "strikethrough",
        "eraser",
        "forecolor",
        "bgcolor",
        "fontsize",
        "head",
        "unorderlist",
        "orderlist",
        "alignleft",
        "aligncenter",
        "alignright",
        "link",
        "unlink",
        "img",
        "video",
        "undo",
        "redo",
        "fullscreen"
      ];
      editor.config.menuFixed = false;
      editor.config.uploadImgUrl = "/api/file/uploadTempFile";
      //   editor.config.uploadParams = {
      //     appName: "news",
      //     appId: "news"
      //   };
      // 设置 headers（举例）
      editor.config.uploadHeaders = {
        Accept: "*"
      };
      // 隐藏掉插入网络图片功能。该配置，只有在你正确配置了图片上传功能之后才可用。
      editor.config.hideLinkImg = true;
      editor.onchange = function() {
        self.content = editor.$txt.html();
        self.contentText = editor.$txt.text();
        // console.log(editor.$txt.find("img").length);
      };
      editor.create();
    },
    ...mapActions([
      "getbusiness",
      "getdeptstaff",
      "uploadFile",
      "getapinoticenoticesave",
      "getRequestList"
    ])
  }
};
</script>
<style scoped>
#rangeInput {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editorBox {
  width: 80%;
  margin-left: 136px;
  float: left;
  margin-left: 10px;
}
/*公告预览弹出框*/

h3 {
  margin: 0;
  font-size: 14px;
}

.Modals {
  background: #fff;
  box-shadow: 0 5px 14px #cccccc;
  width: 640px;
  height: 744px;
}

.modaltitle {
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 2px 5px #ccc;
}

.modalcontent {
  padding: 20px 30px 0 30px;
  height: 582px;
  overflow-y: auto;
}

.imgbox {
  width: 100%;
  height: 280px;
}

.imgbox img {
  width: 100%;
  height: 100%;
}
.modalcontent ul li {
  width: 100%;
  border: 1px solid #d9d9d9;
  height: 36px;
  line-height: 36px;
  margin-top: 6px;
  padding-left: 12px;
}
.modalfooter {
  text-align: center;
  margin: 32px;
}
.modalfooter input {
  width: 80px;
  height: 34px;
  line-height: 34px;
  background: #aeaeae;
  font-size: 16px;
  color: #fff;
}
.contentBox {
  margin-top: 24px;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 24px;
  word-break: break-word;
}
/*--------------*/

.main_rightTop p {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  width: calc(100% - 88px);
  border-bottom: 1px solid #d9d9d9;
}

.main_rightTop {
  width: 100%;
}

.main_rightMain {
  margin-left: 44px;
  width: calc(100% - 88px);
}

.inputText {
  border: 1px solid #d9d9d9;
  width: 240px;
  margin-left: 5px;
}

.firmname {
  line-height: 36px;
  height: 36px;
  margin-top: 24px;
}

.firmlogo {
  margin-top: 24px;
}

.warnStyle {
  color: #ff5f57;
  font-size: 12px;
  margin-left: 85px;
  margin-top: 6px;
}

.redBorder {
  border: 1px solid #ff5f57;
}

.focusBorder {
  border: 1px solid #fcb298;
}

.firmlogo {
  position: relative;
  margin-top: 24px;
}

.firmlogo input {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #e7744a;
  font-size: 14px;
  color: #fff;
  position: absolute;
  left: 183px;
  top: 50px;
}

.fjupload {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #e7744a;
  font-size: 14px;
  color: #fff;
  margin-left: 10px;
}

.egRatio {
  position: absolute;
  top: 3px;
  left: 183px;
  color: #8f8e94;
  width: 52%;
}

.firmlogo img {
  margin-left: 11px;
}

.closeimg {
  cursor: pointer;
  float: right;
  width: 20px;
  height: 20px;
  background: url("/static/img/Slice.png") no-repeat -29px -153px;
  margin-top: 7px;
  margin-right: 12px;
}

.firmfujian {
  margin-top: 24px;
}

.firmfujian ul {
  margin-left: 85px;
}

.firmfujian ul li {
  width: 292px;
  border: 1px solid #d9d9d9;
  height: 36px;
  line-height: 36px;
  margin-top: 6px;
  padding-left: 12px;
}

.checkBox {
  margin-left: 85px;
  margin-top: 10px;
}

.checkBox p {
  margin-top: 5px;
  margin-left: 22px;
}

.grayfont {
  font-size: 12px;
  color: #8f8e94;
}

.baocun {
  width: 80px;
  height: 35px;
  color: #fff;
  font-size: 16px;
  background: #e7744a;
  line-height: 35px;
}

.quxiao {
  width: 80px;
  height: 35px;
  color: #fff;
  font-size: 16px;
  background: #aeaeae;
  line-height: 35px;
}
/***********************************弹出组件***************************/
/*成员弹出*/

.centerCenter > div {
  width: 30px;
  height: 30px;
  background-color: #fff;
  color: #000;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.centerCenter {
  width: 50px;
  height: 100%;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.centerRightBotLiR {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
}

.centerRightBotLiL > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}

.centerRightBotLiL > div:nth-child(1) {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #ececec;
  margin-right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerRightBotLiL > div:nth-child(2) img {
  width: 100%;
  height: 100%;
}

.centerRightBotLiL > div:nth-child(2) {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #ececec;
  margin-right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerRightBotLiL > div:nth-child(3) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 250px;
}

.centerRightBotLiL {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerRightBot {
  height: 235px;
  margin-top: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.centerRightBot ul li:hover {
  background-color: #f6f6f6;
}

.centerRightBot ul li:nth-child(1) {
  margin-top: 20px;
}

.centerRightBot ul li {
  display: flex;
  align-items: center;
  height: 27px;
  width: 100%;
  cursor: pointer;
  padding-left: 15px;
  justify-content: space-between;
}

.centerRightBot {
  height: 365px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #fff;
}

.centerLeftBotFourLiR {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
  color: #e7744a;
}

.centerLeftBotFourLiL > div:nth-child(3) {
  width: 17px;
  height: 17px;
  margin-right: 7px;
  margin-top: -6px;
}
.centerLeftBotFourLiL > div:nth-child(3) img {
  width: 100%;
  height: 100%;
}
.centerLeftBotFourLiL > div:nth-child(4) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 250px;
}
.centerLeftBotFourLiL > div:nth-child(1) img,
.centerLeftBotFourLiL > div:nth-child(2) img {
  width: 100%;
  height: 100%;
}

.centerLeftBotFourLiL > div:nth-child(1),
.centerLeftBotFourLiL > div:nth-child(2) {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #ececec;
  margin-right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotFourLiL {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotFour {
  height: 235px;
  margin-top: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.centerLeftBotFour ul li:hover {
  background-color: #f6f6f6;
}

.centerLeftBotFour ul li {
  display: flex;
  align-items: center;
  height: 27px;
  width: 100%;
  cursor: pointer;
  padding-left: 15px;
  justify-content: space-between;
}

.centerLeftBotThr {
  height: 25px;
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.centerLeftBotThr > div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  margin-top: 5px;
}

.centerLeftBotThr > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.centerLeftBotOne {
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotOneL {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotOneI input {
  height: 30px;
  border: none;
  line-height: 30px;
  vertical-align: baseline;
}

.centerLeftBotOneI {
  width: 310px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #000;
}

.centerLeftBotOne > div {
  width: 370px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid #d1c4b9;
  display: flex;
  align-items: center;
}

.centerLeftBotTwo ul li > div:nth-child(2) {
  color: #e7744a;
  margin-right: 5px;
  margin-left: 5px;
  cursor: pointer;
}

.centerLeftBotTwo ul li:nth-child(1) > div:nth-child(2) {
  margin-left: 0px;
}

.centerLeftBotTwo ul {
  margin-left: 15px;
}

.centerLeftBotTwo ul li {
  float: left;
  display: flex;
}

.centerLeftBotTwo {
  min-height: 20px;
}

.centerLeftBot > div {
  width: 100%;
}

.centerLeftBot {
  height: 365px;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #fff;
}

.centerLeftTop,
.centerRightTop {
  height: 45px;
  background-color: #f4f4f5;
  line-height: 55px;
  font-size: 16px;
  color: #000;
  padding-left: 5px;
}

.centerLeft {
  width: 400px;
  height: 410px;
  margin-left: 30px;
}

.centerRight {
  width: 400px;
  height: 410px;
  margin-left: 20px;
}

.ModalsmemTop {
  width: 100%;
  height: 66px;
  background-color: #fff;
  text-align: center;
  font-size: 16px;
  color: #303030;
  line-height: 66px;
}

.ModalsmemCenter {
  width: 100%;
  height: 410px;
  background-color: #f4f4f5;
  display: flex;
}

.ModalsmemBot {
  width: 100%;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f5;
}

.ModalsmemBot > div {
  width: 80px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.ModalsmemBot > div:nth-child(1) {
  background-color: #e7744a;
  margin-right: 22px;
}

.ModalsmemBot > div:nth-child(2) {
  background-color: #aeaeae;
  margin-left: 22px;
}

.Modalsmem {
  width: 960px;
  height: 560px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
  animation: madalsBox 0.8s;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  border-radius: 4px;
}

@keyframes madalsBox {
  from {
    transform: translateY(-200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ModalsmemBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 9999;
}
.centerLeftBotOneX img {
  cursor: pointer;
}
.grayColor {
  color: #ccc;
}
/* **********************弹出组件样式结束*************** */
</style>